.topinfo
{
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	// margin-top: 30rpx;
	.img
	{
		width: 200rpx;
		height: 284rpx;
		border-radius: 20rpx;
	}
	display: flex;
	align-items: center;
	// padding: 20rpx;
	box-sizing: border-box;
	.imgbox
	{
		width: 180rpx;
		height: 256rpx;
		border-radius: 20rpx;
		position: relative;
		.img
		{
			width: 100%;
			height: 100%;
		border-radius: 20rpx;
		}
		.label
		{
			width: 116rpx;
			height: 32rpx;
			position: absolute;
			left: 0;
			top: 0;
			.labelbody
			{
				position: relative;
				image
				{
					width: 100%;
					height: 32rpx;
					vertical-align: top;
				}
				.labelname
				{
					position: absolute;
					left: 0;
					top: 0;
					width: 90%;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	.info
	{
		position: relative;
		height: 256rpx;
		margin-left: 30rpx;
		width: 480rpx;
		.info-top{
			position: absolute;
			top: 0;
		}
		.info-bot{
			position: absolute;
			bottom: 0;
		}
		.name
		{
			display: flex;
			align-items: center;
			.tip
			{
				width: 32rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				background-color: #FFF29A;
				color: #312C39;
				font-size: 20rpx;
				border-radius: 6rpx;
			}
			.n_name
			{
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-left: 15rpx;
			}
		}
		.mark
		{
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.markname
			{
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				background-color: #47424F;
				color: #FFFFFF;
				font-size: 20rpx;
				text-align: center;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
			}
		}
		.faxing
		{
			margin-top: 20rpx;
			color: #9F9F9F;
			font-size: 20rpx;
		}
		.bom
		{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			.price
			{
				font-size: 36rpx;
				font-weight: bold;
				color: #FFF29A;
				text
				{
					font-size: 26rpx;
					font-weight: 100;
				}
				.ren
				{
					font-size: 22rpx;
				}
			}
			.menu
			{
				margin-top: 10rpx;
				display: flex;
				.menuitem
				{
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					.menuimg
					{
						width: 24rpx;
						height: 24rpx;
					}
					text
					{
						font-size: 22rpx;
						color: #FFF29A;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
}

.markinfo
{
	// padding: 0 30rpx;
	width: 708rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: 0 auto;
	margin-top: 10rpx;
	.item
	{
		width: 260rpx;
		height: 120rpx;
		position: relative;
		.bgimg
		{
			width: 100%;
			height: 100%;
		}
		.iteminfo
		{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			.top
			{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				image
				{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
			.bom
			{
				font-size: 32rpx;
				font-weight: 500;
				margin-top: 10rpx;
			}
		}
	}
}

.rateview
{
	margin: 20rpx 30rpx;
	padding: 20rpx 40rpx;
	box-sizing: border-box;
	background-color: #3D3943;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	color: #FFFFFF;
	justify-content: space-between;
	.left
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 130rpx;
		.name
		{
			font-size: 30rpx;
			font-size: 500;
		}
		.rate
		{
			font-size: 56rpx;
			color: #FFF29A;
			margin-top: 6rpx;
		}
		.num
		{
			font-size: 20rpx;
			color: #9F9F9F;
		}
	}
	.right
	{
		margin-top: 10rpx;
		height: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.item
		{
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			color: #9F9F9F;
			.pro
			{
				width: 300rpx;
				margin: 0 20rpx;
			}
		}
	}
}

.descview
{
	padding: 0 30rpx;
	margin-top: 40rpx;
	box-sizing: border-box;
	.top
	{
		display: flex;
		align-items: center;
		.line
		{
			width: 4rpx;
			height: 32rpx;
			background-color: #FFF29A;
			border: 2rpx;
		}
		text{
			color: #FFF29A;
			font-size: 32rpx;
			font-weight: 500;
			margin-left: 20rpx;
		}
	}
	.desc
	{
		color: #9F9F9F !important;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 56rpx;
		position: relative;
		height: 160rpx;
		overflow: hidden;
		/deep/ p{
			color: #9F9F9F !important;
		}
	}
	.desc::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100rpx;
	  text-align: right;
	  background: linear-gradient(0deg, rgba(49, 44, 57,1) 0%, rgba(159, 159, 159, 0) 100%);
	}
	.all
	{
		height: auto;
	}
	.all::after
	{
		background:none !important;
	}
	.arrow
	{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		image
		{
			width: 38rpx;
			height: 38rpx;
		}
	}
	
	.scroll
	{
		width: 100%;
		white-space: nowrap;
		margin-top: 30rpx;
		.item
		{
			display: inline-block;
			margin-right: 30rpx;
			.itembody
			{
				display: flex;
				align-items: center;
				background-color: #3D3943;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				width: 520rpx;
				height: 208rpx;
				image
				{
					width: 160rpx;
					height: 160rpx;
					border: 20rpx;
				}
				.info
				{
					margin-left: 20rpx;
					width: 280rpx;
					height: 140rpx;
					.name
					{
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.con
					{
						font-size: 20rpx;
						color: #9F9F9F;
						margin-top: 10rpx;
					}
				}
			}
			
		}
	}
}
.recomview
{
	padding: 20rpx;
	box-sizing: border-box;
	margin-top: 40rpx;
	padding-top: 0;
	.top
	{
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		justify-content: space-between;
		.left
		{
			display: flex;
			align-items: center;
			.line
			{
				width: 4rpx;
				height: 32rpx;
				background-color: #FFF29A;
				border: 2rpx;
			}
			text{
				color: #FFF29A;
				font-size: 32rpx;
				font-weight: 500;
				margin-left: 20rpx;
			}
		}
		.right
		{
			display: flex;
			align-items: center;
			image
			{
				width: 24rpx;
				height: 24rpx;
			}
			text
			{
				font-size: 20rpx;
				color: #9F9F9F;
				margin-left: 10rpx;
				margin-bottom: 4rpx;
			}
		}
	}
	.list
	{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 44rpx;
		.item
		{
			margin: 0 10rpx;
			height: 350rpx;
			width: 216.5rpx;
			margin-bottom: 30rpx;
			image
			{
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx;
			}
			.name
			{
				font-size: 28rpx;
				color: #9F9F9F;
				margin-top: 10rpx;
				width: 216rpx;
				text-align: center;
			}
		}
	}
}
.bomview
{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 99;
	background: #3A353E;
	box-shadow: 0rpx -1rpx 2rpx rgba(75, 75, 75, 0.5);
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	.left
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 130rpx;
		.btn
		{
			display: flex;
			flex-direction: column;
			font-size: 20rpx;
			color: #FFF29A;
			image
			{
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 6rpx;
			}
			
		}
		.btn1
		{
			image
			{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.right
	{
		display: flex;
		align-items: center;
		width: 376rpx;
		height: 80rpx;
		border-radius: 40rpx;
		justify-content: center;
		font-size: 30rpx;
		color: #3A353E;
		background-color: #FFF29A;
		image
		{
			width: 38rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
}

.light-index{
	background: #fff;
}
.light-tip{
	background: #ff7664 !important;
	color: #fff !important;
}
.light-n_name{
	color: #333 !important;
}
.light-markname{
	background: #ffa573 !important;
	color: #fff;
}
.light-price{
	color: #ff4d62 !important;
}
.light-played{
	color: #ffa552 !important;
}
.light-333{
	color: #333 !important;
}
.light-rateview{
	background: #fff !important;
	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.10); 
}
.light-name{
	color: #333 !important;
}
.light-rate{
	color: #FF9D66 !important;
}
.light-num{
	color: #999999 !important;
}
.light-desc::after{
	background: linear-gradient(0deg, rgba(255, 255, 255,1) 0%, rgba(159, 159, 159, 0) 100%) !important;
}
.light-item{
	background: #fff !important;
	
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.06) !important; 	
}
.light-item-name{
	color: #333 !important;
}
.light-item-666{
	color: #666 !important;
}
.light-itembody{
	box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.06) !important; 	
	background: #fff !important;
}
.light-bomview{
	position: fixed;
	bottom: 40rpx;
	left: 60rpx;
	width: 630rpx;
	height: 96rpx;
	background: linear-gradient(98deg,#ffb26a, #ff810d 100%);
	border-radius: 130rpx;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255,150,53,0.50); 
	line-height: 96rpx;
	text-align: center;
	display: flex;
	align-items: center;
	padding-left: 200rpx;
	image{
		width: 38rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	view{
		color: #ffffff;
		font-size: 32rpx;
	}
}
.light-index-line{
	background: #ff9d66 !important;
}
.dark-bomview
{
	background: #FFF29A;
	color: #000;
	box-shadow:none;
	view
	{
		color: #000;
	}
}


.light-bom{
	background: rgba(250,250,250,0.90) !important;
	box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(0,0,0,0.06) !important; 
}
.light-bom text{
	color: #ff9d66 ;
}
.light-right{
	background: #ff9d66 !important;
	color: #FFFFFF !important;
	text
	{
		color: #FFFFFF;
	}
}